// 变量
@bgColor: #f2f2f2;  // 背景色
@themeColor: #0099FF;  // 主题色
@fontColor: #6E6E6D;  // 字体色

// 公共样式
// 页面头部样式
.page-top {
    width: 100%;
    height: 60px;
    padding-left: 25px;
    background-color: @bgColor;
    // 页面头部标题
    .page-title {
        height: 100%;
        font-size: 18px;
        display: flex;
        align-items: center;
        p {
            height: 25px;
            padding-left: 10px;
            border-left: 8px solid @themeColor;
            color: @fontColor ;
        }
    }
}
// 布局内容区padding 0
.ant-layout-content{
    padding: 0;
}
// 页面内容区
.page-context{
    width: 100%;
    box-sizing: border-box;
    padding: 25px 25px 0 25px;
}

// 重置按钮样式
.reset{
    width: 100px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #409eff;
    background-color: #EBF3FE;
    color: #409eff;
    margin-right: 50px;
    &:hover{
        background-color: #409EFF;
        color: #fff;
    }
}

// 筛选按钮样式
.filter{
    width: 100px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #409eff;
    background-color: #409eff;
    color: #fff;
    &:hover{
        background-color: #66B1FF;
    }
}

//批量删除按钮
.batch-del{
    width: 80px;
    height: 35px;
    border-radius: 5px;
    border: 1px solid #F56C6C;
    background-color: #fde2e2;
    color: #F56C6C;
    margin-right: 20px;
    &:hover{
        background-color: #F56C6C;
        color: #fff;
    }
}

// 添加按钮
.add{
    width: 80px;
    height: 35px;
    border-radius: 5px;
    border: 1px solid #67c23a;
    background-color: #e1f3d8;
    color: #67c23a;
    &:hover{
        background-color: #67C23A;
        color: #fff;
    }
}

// 表格内部 编辑 修改按钮
.edit{
    width: 50px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #E6A23C;
    background-color: #FDF6EC;
    color: #E6A23C;
    margin-right: 20px;
    &:hover{
        background-color: #E6A23C;
        color: #fff;
    }
}

//  表格内部 删除
.del{
    width: 50px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #F56C6C;
    background-color: #fde2e2;
    color: #F56C6C;
    &:hover{
        background-color: #F56C6C;
        color: #fff;
    }
}

// 表格内部 商品管理
.shop-manage{
    width: 70px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #67c23a;
    background-color: #e1f3d8;
    color: #67c23a;
    margin-right: 20px;
    &:hover{
        background-color: #67C23A;
        color: #fff;
    }
}



